<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理系统</title>
    <!-- 第一：下载、导入Vue框架的JS文件 -->
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>
</head>
<body>
    <!-- 第二：结构化页面 - 设置挂载点 -->
    <div id="app">
        <h1 align="center">商品列表</h1>

        <table border="1" align="center" width="80%">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>总价</th>
                <th>描述</th>
                <th>操作</th>
            </tr>

            <tr v-for="(p,index) in productList" :key="p.id">
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.price | moneyFilter('￥',2) }}</td>
                <td v-color:color="p.count < 5 ? 'red':'green'">{{ p.count }}</td>
                <td>{{ p.price * p.count | moneyFilter('￥',1) }}</td>
                <td>{{ p.desc }}</td>
                <td>
                    <span @click="del(p.id)">删除</span> 
                    | 
                    <span @click="show(p,index)">修改</span>
                </td>
            </tr>
        </table>

        <div style="width: 80%;border:1px solid red;
                    margin: 30px auto;padding: 30px;
                    box-sizing: border-box" @dblclick="cls()">

            <!-- 插值表达式支持三目运算 -->
            <h1>{{ isUpdate == true ? '修改商品' : '添加商品'  }}</h1>

            <form>
                商品编号：<input type="text" v-model="product.id" ref="pid"/><p/>
                商品名称：<input type="text" v-model="product.name"/><p/>
                商品价格：<input type="text" v-model="product.price"/><p/>
                商品库存：<input type="text" v-model="product.count"/><p/>
                商品描述：<input type="text" v-model="product.desc"/><p/>
                <button type="button" @click="tj()">提交</button>
            </form>
        </div>
    </div>

    <script src="js/index.js"></script>

</body>
</html>